8f:I[903690,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"SWRDataProvider"] 91:T1d473,[V0_FILE]jpg:file="public/images/hero-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/hero-model-4FGEouBoNaEBdLFX1Vj0zw5Ur3FeQt.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/products/serum.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/serum-kaXdnxzTYhsgDgX9i8HEEeGMRlACGi.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/skincare-ritual.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/skincare-ritual-AK2dNVATW196BORhacPKu2VVQPIMlO.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/products/oil.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/oil-Wa07LylMl5QKD5zV9aMHvoJ3e5cwjF.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/products/cleanser.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/cleanser-xOYvuosRB5btqVr0P5HrHatRY7xYqR.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/products/moisturizer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/moisturizer-lrHESGHooBCfRyJc4qJCaWBXfVOGHz.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "server-only": "0.0.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata, Viewport } from 'next' import { DM_Sans, Playfair_Display } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import { CartProvider } from '@/components/boty/cart-context' import './globals.css' const dmSans = DM_Sans({ subsets: ["latin"], variable: '--font-dm-sans', weight: ['300', '400', '500', '600'] }); const playfairDisplay = Playfair_Display({ subsets: ["latin"], variable: '--font-playfair', weight: ['400', '500', '600', '700'] }); export const metadata: Metadata = { title: 'AMBER — Natural Skincare', description: 'Discover skincare that breathes with you. Pure ingredients, gentle rituals, radiant results with AMBER.', generator: 'v0.app', keywords: ['skincare', 'natural', 'organic', 'beauty', 'body care', 'cruelty-free'], icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export const viewport: Viewport = { themeColor: '#F7F4EF', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/boty/newsletter.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { ArrowRight, Check } from "lucide-react" export function Newsletter() { const [email, setEmail] = useState("") const [isSubscribed, setIsSubscribed] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { setIsSubscribed(true) setEmail("") } } return (

Join the ritual

Subscribe for exclusive offers, skincare tips, and early access to new products.

{isSubscribed ? (

Welcome to the AMBER family!

) : ( )}

Unsubscribe anytime. We respect your inbox.

) } [V0_FILE]jpg:file="public/images/products/mask.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/mask-JUoWsORfyGwobyIjY04lSsOiRcRqKr.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/products/toner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/products/toner-JjjNbNX8NuuvdnfQLPGFlslpFQmDBM.jpg" isMerged="true" [V0_FILE]plaintext:file="public/images/boty-hero.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/boty-hero-oY1UKtFI7Ki8a5hUJ7zvRGG3k2epwW.mp4" isMerged="true" [V0_FILE]jpg:file="public/images/natural-leaf.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/natural-leaf-xVr9GesMuIQgrLGQAH0UtB2RIfhEJ4.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/bento-skin-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/bento-skin-model-2bfJPPEidKjiSfNIYFeVmCZD7UHiLP.jpg" isMerged="true" [V0_FILE]png:file="public/images/add13a77-0251-4025-aa57-2aa5760e6d04.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/add13a77-0251-4025-aa57-2aa5760e6d04-rvPGGMZ2fTQ6BCQVxWnNThxtgSLfNF.png" isMerged="true" [V0_FILE]plaintext:file="public/images/0c826034-d4f2-4d4f-8e99-50e94e4ce63f.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0c826034-d4f2-4d4f-8e99-50e94e4ce63f-dG1CBOjR36xFPTbhcROrHbomGXtlTQ.mp4" isMerged="true" [V0_FILE]plaintext:file="public/images/a0b7c364-afa9-4afa-9716-45718578cc01.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/a0b7c364-afa9-4afa-9716-45718578cc01-Ih8UaqQr1bl8aoNlbRha4FgaQ65eXX.mp4" isMerged="true" [V0_FILE]png:file="public/images/products/0ed61900-dd29-4dd2-bc2d-abc2db54c352.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0ed61900-dd29-4dd2-bc2d-abc2db54c352-02w3mDyU66EfMnLeWFivFbhXh5bEBr.png" isMerged="true" [V0_FILE]png:file="public/images/036a9eb7-4aa9-44aa-ba0a-c3a03061efca.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/036a9eb7-4aa9-44aa-ba0a-c3a03061efca-r73oH8WkxtFrVs8pWmGsvPzTEIryIv.png" isMerged="true" [V0_FILE]typescriptreact:file="components/boty/trust-badges.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Leaf, Droplets, Sparkles, Flower2 } from "lucide-react" const badges = [ { icon: Leaf, title: "Organic Certified", description: "100% organic ingredients" }, { icon: Droplets, title: "Natural Extracts", description: "Pure botanical formulas" }, { icon: Sparkles, title: "Clean Beauty", description: "No toxic chemicals" }, { icon: Flower2, title: "Vegan Formula", description: "Plant-powered skincare" } ] export function TrustBadges() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => { if (sectionRef.current) { observer.unobserve(sectionRef.current) } } }, []) return (

{badges.map((badge, index) => (

{badge.title}

{badge.description}

))}

) } [V0_FILE]plaintext:file="public/images/c4baaf67-b900-4b90-af2a-daf25a5a4b78.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/c4baaf67-b900-4b90-af2a-daf25a5a4b78-5un5eTbj9Z67qEtEdsQwlYrte9dZM9.mp4" isMerged="true" [V0_FILE]png:file="public/images/products/serum-bottles-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6b3b1bba-57eb-4f99-a8a5-3dd5df1d48b2-nzJKOXvj56tlvvoFgTrpPZQGEUkNTu.png" isMerged="true" [V0_FILE]png:file="public/images/products/spray-bottles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/716dd3a8-d23b-48bb-bbe7-3d686a0123ae-YxodB7eYkI7cD9gQunrA1JfreMTdTl.png" isMerged="true" [V0_FILE]png:file="public/images/products/pump-bottles-cream.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8f3056bb-9695-4eb5-94ec-ddadc1ae84e5-h43L5RSrJUpGserfRlr1q3vmRCADDj.png" isMerged="true" [V0_FILE]png:file="public/images/products/jars-wooden-lid.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/03a5999b-c88a-4d66-8d02-f460a91d6ad6-H4IYvt4IXvXrLXcGZnrvQJYdGPcIaM.png" isMerged="true" [V0_FILE]png:file="public/images/products/amber-dropper-bottles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/293ca161-ab20-469e-83a5-737dd7746cfe-lub53CUlEdv2zGXBsTrWCWtGuYd8Rk.png" isMerged="true" [V0_FILE]png:file="public/images/products/pump-bottles-lavender.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8c8e5fbf-af74-4f56-b7d0-5bf98f133943-McjHytbLdcahYj47FhsExf4ZxmwLUK.png" isMerged="true" [V0_FILE]png:file="public/images/products/eye-serum-bottles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/43a24653-e7c4-4463-ad06-8ba6b5542c33-4F7y8RDWjvm1gLNpvKejInM7NOcrse.png" isMerged="true" [V0_FILE]png:file="public/images/products/cream-jars-colored.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1d153b8f-22df-4447-a8a5-686bae8e2f7c-0Z28dlAlCXZz2MUM22mTOxu6yHPMIh.png" isMerged="true" [V0_FILE]png:file="public/images/products/tube-bottles.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/65e80585-38e7-466f-9f40-8f7b3b9b78c8-OD6vG0gLHO7qgxwezFq6EX1WrusxcO.png" isMerged="true" [V0_FILE]typescriptreact:file="components/boty/cart-drawer.tsx" isMerged="true" "use client" import { Minus, Plus, Trash2, ShoppingBag } from "lucide-react" import Image from "next/image" import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, } from "@/components/ui/drawer" import { useCart } from "./cart-context" export function CartDrawer() { const { cart, removeItem, updateQuantity, isOpen, setIsOpen, itemCount, subtotal, isPending } = useCart() const lines = cart?.lines ?? [] const currency = cart?.cost.subtotalAmount.currencyCode ?? "USD" const shipping = 0 const total = subtotal + shipping const formatPrice = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount) const handleCheckout = () => { if (!cart?.checkoutUrl) return const url = `${cart.checkoutUrl}${cart.checkoutUrl.includes("?") ? "&" : "?"}channel=online_store` if (window.self !== window.top) { window.open(url, "_blank") } else { window.location.href = url } } return ( Cart {itemCount} {itemCount === 1 ? 'item' : 'items'} {/* Cart Items */}

{lines.length === 0 ? (

Your cart is empty

) : (

{lines.map((item) => (

{/* Product Image */}

{/* Product Details */}

{item.title}

{formatPrice(item.price)}

{/* Quantity Controls */}

{item.quantity}

{/* Price */}

{formatPrice(item.price * item.quantity)}

))}

)}

{lines.length > 0 && ( {/* Summary */}

Subtotal {formatPrice(subtotal)}

Shipping {shipping === 0 ? 'Free' : formatPrice(shipping)}

Total {formatPrice(total)}

{/* Checkout Button */} )} ) } [V0_FILE]typescriptreact:file="app/product/[id]/page.tsx" isMerged="true" import { notFound } from "next/navigation" import { getProduct, getProducts } from "@/lib/shopify" import { ProductDetail } from "@/components/boty/product-detail" export async function generateStaticParams() { const products = await getProducts() return products.map((product) => ({ id: product.id })) } export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params const product = await getProduct(id) if (!product) { notFound() } return } [V0_FILE]png:file="public/images/bf965cf4-e728-4e72-ab1b-16b1cd8f1822.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bf965cf4-e728-4e72-ab1b-16b1cd8f1822-HsMvU3HWjiDEP5aOy7eTkbpih6z4XS.png" isMerged="true" [V0_FILE]typescriptreact:file="components/boty/footer.tsx" isMerged="true" "use client" import Link from "next/link" import { Instagram, Facebook, Twitter } from "lucide-react" const footerLinks = { shop: [ { name: "Products", href: "#products" }, { name: "About", href: "#about" }, { name: "Ingredients", href: "#ingredients" }, { name: "Testimonials", href: "#testimonials" } ], about: [ { name: "Our Story", href: "#about" }, { name: "Ingredients", href: "#ingredients" }, { name: "Sustainability", href: "#about" }, { name: "Press", href: "/" } ], support: [ { name: "Contact Us", href: "/" }, { name: "FAQ", href: "/" }, { name: "Shipping", href: "/" }, { name: "Returns", href: "/" } ] } export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/boty/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X, ShoppingBag, Search, User } from "lucide-react" import { CartDrawer } from "./cart-drawer" import { useCart } from "./cart-context" export function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const { setIsOpen, itemCount } = useCart() return (

) } [V0_FILE]typescriptreact:file="components/boty/product-grid.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import type { Product } from "@/lib/shopify" type Category = "cream" | "oil" | "serum" const categories = [ { value: "cream" as Category, label: "Cream" }, { value: "oil" as Category, label: "Oil" }, { value: "serum" as Category, label: "Serum" } ] export function ProductGrid({ products }: { products: Product[] }) { const [selectedCategory, setSelectedCategory] = useState("cream") const [isVisible, setIsVisible] = useState(false) const [isTransitioning, setIsTransitioning] = useState(false) const [headerVisible, setHeaderVisible] = useState(false) const [scrollProgress, setScrollProgress] = useState(0) const gridRef = useRef(null) const headerRef = useRef(null) const sectionRef = useRef(null) const filteredProducts = products.filter(product => product.category === selectedCategory) const handleCategoryChange = (category: Category) => { if (category !== selectedCategory) { setIsTransitioning(true) setTimeout(() => { setSelectedCategory(category) setTimeout(() => { setIsTransitioning(false) }, 50) }, 300) } } // Preload all product images on mount useEffect(() => { products.forEach((product) => { const img = new window.Image() img.src = product.image }) }, []) // Scrollytelling effect useEffect(() => { const handleScroll = () => { if (!sectionRef.current) return const section = sectionRef.current const rect = section.getBoundingClientRect() const sectionTop = rect.top const windowHeight = window.innerHeight // Only start when section is fully in viewport if (sectionTop > 0) { setScrollProgress(0) return } // Calculate progress based on how far section has scrolled const scrollDistance = Math.abs(sectionTop) const maxScrollDistance = rect.height - windowHeight const progress = scrollDistance / maxScrollDistance // Clamp between 0 and 1 const clampedProgress = Math.max(0, Math.min(1, progress)) setScrollProgress(clampedProgress) } window.addEventListener('scroll', handleScroll) handleScroll() // Initial call return () => window.removeEventListener('scroll', handleScroll) }, []) useEffect(() => { const gridObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) const headerObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setHeaderVisible(true) } }, { threshold: 0.1 } ) if (gridRef.current) { gridObserver.observe(gridRef.current) } if (headerRef.current) { headerObserver.observe(headerRef.current) } return () => { if (gridRef.current) { gridObserver.unobserve(gridRef.current) } if (headerRef.current) { headerObserver.unobserve(headerRef.current) } } }, []) // Calculate transform based on scroll progress const cardWidth = 320 // Card width const gap = 24 // Gap between cards const totalWidth = (cardWidth + gap) * filteredProducts.length - gap const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920 const maxScroll = Math.max(0, totalWidth - viewportWidth + 100) // +100 for padding const horizontalOffset = scrollProgress * maxScroll return (

{/* Header */}

Our Collection

Gentle essentials

Thoughtfully crafted products for your daily skincare ritual

{/* Segmented Control */}

{/* Product Grid - Horizontal */}

{filteredProducts.map((product, index) => (

{/* Image - Full Height */}

{/* Badge */} {product.badge && ( {product.badge} )} {/* Info with Progressive Blur */}

{/* Progressive blur overlay */}

{/* Content */}

{product.name}

{product.description}

${product.price} {product.originalPrice && ( ${product.originalPrice} )}

))}

{/* View All Button */}

) } [V0_FILE]plaintext:file="public/images/hero-amber.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/hero-amber-z3hBWww4xrjdc1lZKN6ilsHl9FdPSH.mp4" isMerged="true" Non-image binary files cannot be read directly. It is available at the following URL: https://blobs.vusercontent.net/blob/hero-amber-z3hBWww4xrjdc1lZKN6ilsHl9FdPSH.mp4 [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); /* Boty — Natural Skincare Theme */ :root { /* Brand Colors: Light Gray, Soft Gray, Medium Gray, Olive Green, Taupe, Charcoal */ --background: #F5F5F5; /* Very light gray */ --foreground: #2C2C2C; /* Charcoal */ --card: #EFEFEF; /* Soft gray */ --card-foreground: #2C2C2C; --popover: #F5F5F5; --popover-foreground: #2C2C2C; --primary: #4F5B3A; /* Olive Green */ --primary-foreground: #F5F5F5; --secondary: #E0E0E0; /* Medium gray */ --secondary-foreground: #2C2C2C; --muted: #EFEFEF; /* Soft gray */ --muted-foreground: #6B6B6B; --accent: #D5D5D5; /* Light taupe gray */ --accent-foreground: #2C2C2C; --destructive: #A65D57; --destructive-foreground: #F5F5F5; --border: #E0E0E0; --input: #EFEFEF; --ring: #4F5B3A; --chart-1: #4F5B3A; --chart-2: #B8B8B8; --chart-3: #D5D5D5; --chart-4: #8B9A6D; --chart-5: #6B6B6B; --radius: 1rem; --sidebar: #EFEFEF; --sidebar-foreground: #2C2C2C; --sidebar-primary: #4F5B3A; --sidebar-primary-foreground: #F5F5F5; --sidebar-accent: #E0E0E0; --sidebar-accent-foreground: #2C2C2C; --sidebar-border: #E0E0E0; --sidebar-ring: #4F5B3A; } .dark { --background: #2C2C2C; --foreground: #F7F4EF; --card: #3D3D3D; --card-foreground: #F7F4EF; --popover: #2C2C2C; --popover-foreground: #F7F4EF; --primary: #8B9A6D; --primary-foreground: #2C2C2C; --secondary: #4A4540; --secondary-foreground: #F7F4EF; --muted: #3D3D3D; --muted-foreground: #B8ADA3; --accent: #4A4540; --accent-foreground: #F7F4EF; --destructive: #A65D57; --destructive-foreground: #F7F4EF; --border: #4A4540; --input: #3D3D3D; --ring: #8B9A6D; --chart-1: #8B9A6D; --chart-2: #B8ADA3; --chart-3: #6B6560; --chart-4: #4F5B3A; --chart-5: #D8CFC4; --sidebar: #3D3D3D; --sidebar-foreground: #F7F4EF; --sidebar-primary: #8B9A6D; --sidebar-primary-foreground: #2C2C2C; --sidebar-accent: #4A4540; --sidebar-accent-foreground: #F7F4EF; --sidebar-border: #4A4540; --sidebar-ring: #8B9A6D; } @theme inline { --font-sans: 'DM Sans', 'DM Sans Fallback', sans-serif; --font-serif: 'Playfair Display', 'Playfair Display Fallback', serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 8px); --radius-2xl: calc(var(--radius) + 16px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } html { scroll-behavior: smooth; } body { @apply bg-background text-foreground; } } /* Custom soft shadow utility */ .boty-shadow { box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; } /* Smooth transitions */ .boty-transition { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Blur in animation */ @keyframes blur-in { 0% { opacity: 0; filter: blur(12px); transform: translateY(10px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } .animate-blur-in { animation: blur-in 0.8s ease-out; } /* Scale fade in animation */ @keyframes scale-fade-in { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .animate-scale-fade-in { animation: scale-fade-in 0.6s ease-out; } [V0_FILE]plaintext:file="public/images/noisette-creme.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Video%20of%20Noisette%20cr_me%201-h4S1T9tLHMOyCzCkADbHqeevqP2L8K.mp4" isMerged="true" Non-image binary files cannot be read directly. It is available at the following URL: https://blobs.vusercontent.net/blob/Video%20of%20Noisette%20cr_me%201-h4S1T9tLHMOyCzCkADbHqeevqP2L8K.mp4 [V0_FILE]typescriptreact:file="components/boty/impact-section.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Heart, Users, TreePine, Package } from "lucide-react" const stats = [ { icon: TreePine, value: "50K+", label: "Trees Planted", description: "One tree for every order" }, { icon: Package, value: "100%", label: "Plastic-Free", description: "Recyclable packaging only" }, { icon: Users, value: "200+", label: "Local Farmers", description: "Supporting communities" }, { icon: Heart, value: "Zero", label: "Animal Testing", description: "Cruelty-free certified" } ] export function ImpactSection() { const [headerVisible, setHeaderVisible] = useState(false) const [statsVisible, setStatsVisible] = useState(false) const [quoteVisible, setQuoteVisible] = useState(false) const [imageScale, setImageScale] = useState(1) const headerRef = useRef(null) const statsRef = useRef(null) const quoteRef = useRef(null) useEffect(() => { const headerObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setHeaderVisible(true) } }, { threshold: 0.1 } ) const statsObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setStatsVisible(true) } }, { threshold: 0.1 } ) const quoteObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setQuoteVisible(true) } }, { threshold: 0.1 } ) if (headerRef.current) { headerObserver.observe(headerRef.current) } if (statsRef.current) { statsObserver.observe(statsRef.current) } if (quoteRef.current) { quoteObserver.observe(quoteRef.current) } return () => { if (headerRef.current) { headerObserver.unobserve(headerRef.current) } if (statsRef.current) { statsObserver.unobserve(statsRef.current) } if (quoteRef.current) { quoteObserver.unobserve(quoteRef.current) } } }, []) // Scroll-based zoom effect for image useEffect(() => { const handleScroll = () => { if (!quoteRef.current) return const rect = quoteRef.current.getBoundingClientRect() const windowHeight = window.innerHeight // Calculate how much of the quote block is visible const visibleTop = Math.max(0, -rect.top) const visibleBottom = Math.min(rect.height, windowHeight - rect.top) const visibleHeight = visibleBottom - visibleTop const visiblePercent = visibleHeight / windowHeight // Scale from 1 to 1.15 based on visibility const scale = 1 + (Math.min(1, Math.max(0, visiblePercent)) * 0.15) setImageScale(scale) } window.addEventListener('scroll', handleScroll) handleScroll() // Initial call return () => window.removeEventListener('scroll', handleScroll) }, []) return (

{/* Header */}

Our Impact

Beauty with purpose.

We're committed to making a positive impact on the planet and the people who call it home. Every purchase supports sustainable practices and ethical partnerships.

{/* Stats Grid */}

{stats.map((stat, index) => (

{stat.value}

{stat.label}

{stat.description}

))}

{/* Quote Block */}

{/* Left - Image */}

{/* Right - Quote */}

Skincare shouldn't cost the earth. We believe in creating products that nourish your skin while protecting the planet for future generations.

) } [V0_FILE]typescriptreact:file="components/boty/ingredients-section.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { Droplets, Sparkles, Sun, Wind } from "lucide-react" const ingredients = [ { icon: Droplets, name: "Hyaluronic Acid", benefit: "Deep hydration", description: "Naturally derived moisture magnet that holds up to 1000x its weight in water" }, { icon: Sparkles, name: "Vitamin C", benefit: "Brightening power", description: "Plant-based antioxidant that evens tone and boosts radiance" }, { icon: Sun, name: "Rosehip Oil", benefit: "Skin renewal", description: "Cold-pressed botanical rich in essential fatty acids and vitamins" }, { icon: Wind, name: "Aloe Vera", benefit: "Soothing comfort", description: "Pure gel from organic plants that calms and repairs" }, { icon: Sparkles, name: "Niacinamide", benefit: "Pore refining", description: "Vitamin B3 that minimizes pores and improves skin texture naturally" }, { icon: Droplets, name: "Squalane", benefit: "Moisture lock", description: "Plant-derived emollient that mimics skin's natural oils perfectly" } ] export function IngredientsSection() { const [scrollProgress, setScrollProgress] = useState(0) const sectionRef = useRef(null) useEffect(() => { const handleScroll = () => { if (!sectionRef.current) return const section = sectionRef.current const rect = section.getBoundingClientRect() const sectionTop = rect.top const windowHeight = window.innerHeight // Only start when section is in viewport if (sectionTop > 0) { setScrollProgress(0) return } // Calculate progress based on how far section has scrolled const scrollDistance = Math.abs(sectionTop) const maxScrollDistance = rect.height - windowHeight const progress = scrollDistance / maxScrollDistance // Clamp between 0 and 1 const clampedProgress = Math.max(0, Math.min(1, progress)) setScrollProgress(clampedProgress) } window.addEventListener('scroll', handleScroll) handleScroll() // Initial call return () => window.removeEventListener('scroll', handleScroll) }, []) // Calculate blur based on scroll progress (starts at 20px, ends at 0px) const blurAmount = Math.max(0, 20 - (scrollProgress || 0) * 20) const opacity = Math.min(1, (scrollProgress || 0) + 0.3) return (

{/* Sticky Container */}

{/* Full Viewport Image */}

{/* Dark overlay for text readability */}

{/* Centered Text Overlay with Scroll-Based Blur */}

Pure Ingredients

Nature's finest,
for your skin.

Every ingredient is carefully selected from sustainable sources around the world. We only use what your skin truly needs — nothing more, nothing less.

) } [V0_FILE]typescriptreact:file="components/boty/feature-section.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { Recycle, Leaf, Flower2, Globe } from "lucide-react" const features = [ { icon: Recycle, title: "Eco-Friendly Packaging", description: "Recyclable and biodegradable materials" }, { icon: Leaf, title: "100% Natural", description: "No synthetic chemicals or parabens" }, { icon: Flower2, title: "Plant-Based", description: "Botanical extracts and essential oils" }, { icon: Globe, title: "Ethical Sourcing", description: "Fair trade certified ingredients" } ] export function FeatureSection() { const [isVisible, setIsVisible] = useState(false) const [isVideoVisible, setIsVideoVisible] = useState(false) const [headerVisible, setHeaderVisible] = useState(false) const bentoRef = useRef(null) const videoSectionRef = useRef(null) const headerRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) const videoObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVideoVisible(true) } }, { threshold: 0.1 } ) const headerObserver = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setHeaderVisible(true) } }, { threshold: 0.1 } ) if (bentoRef.current) { observer.observe(bentoRef.current) } if (videoSectionRef.current) { videoObserver.observe(videoSectionRef.current) } if (headerRef.current) { headerObserver.observe(headerRef.current) } return () => { if (bentoRef.current) { observer.unobserve(bentoRef.current) } if (videoSectionRef.current) { videoObserver.unobserve(videoSectionRef.current) } if (headerRef.current) { headerObserver.unobserve(headerRef.current) } } }, []) return (

{/* Bento Grid */}

{/* Left Large Block - Rainbow Makeup */}

{/* Overlay Card */}

Express Your True Colors

Bold, vibrant, and unapologetically you. Our formulas are made to shine.

{/* Top Right - Blue Makeup */}

{/* Bottom Right - Warm Sunset */}

{/* Overlay Card */}

{/* Header Section */}

Why Boty

Care that breathes.

We believe skincare should be a gentle ritual, not a complicated routine. Every product is crafted with intention and love for your skin.

{/* Two Videos Side by Side */}

{/* Video 1 */}

{/* Person Info with Progressive Blur */}

Emma Laurent

28 years old

Hydra Serum · Daily Moisturizer

Morning cleanse, serum, and SPF — simplicity is the key to glowing skin.

{/* Video 2 */}

{/* Feature Cards Below Videos */}

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/boty/cta-banner.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import Image from "next/image" import { Leaf, Flower2, Globe } from "lucide-react" export function CTABanner() { const [isVisible, setIsVisible] = useState(false) const bannerRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 } ) if (bannerRef.current) { observer.observe(bannerRef.current) } return () => { if (bannerRef.current) { observer.unobserve(bannerRef.current) } } }, []) return (

{/* Background Image */} Natural ingredients

{/* Progressive Blur Overlay - Left to Right (50% width) */}

100% Natural

100% You

No Harsh Chemicals

Plant-Based Goodness

Ethically Sourced

) } [V0_FILE]typescriptreact:file="components/boty/testimonials.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Star } from "lucide-react" const testimonials = [ { id: 1, name: "Sarah M.", location: "New York", rating: 5, text: "My skin has never felt so soft and nourished. The Radiance Serum is now a permanent part of my morning routine.", product: "Radiance Serum" }, { id: 2, name: "Emma L.", location: "Los Angeles", rating: 5, text: "Finally, skincare that actually feels natural. No more harsh chemicals. My sensitive skin loves AMBER products.", product: "Gentle Cleanser" }, { id: 3, name: "Jessica R.", location: "Chicago", rating: 5, text: "The Hydra Cream is absolutely divine. It absorbs beautifully and keeps my skin hydrated all day long.", product: "Hydra Cream" }, { id: 4, name: "Maria K.", location: "Miami", rating: 5, text: "I've tried countless serums but nothing compares to the glow I get from AMBER. Absolutely transformative.", product: "Glow Serum" }, { id: 5, name: "Sophie T.", location: "Seattle", rating: 5, text: "The packaging is beautiful and sustainable. I feel good knowing I'm choosing eco-friendly skincare.", product: "Night Cream" }, { id: 6, name: "Anna P.", location: "Boston", rating: 5, text: "My acne-prone skin has cleared up since switching to AMBER. Natural ingredients really make a difference.", product: "Gentle Cleanser" }, { id: 7, name: "Claire B.", location: "Austin", rating: 5, text: "The texture of the Renewal Oil is perfection. It absorbs quickly and leaves my skin glowing.", product: "Renewal Oil" }, { id: 8, name: "Lily W.", location: "Portland", rating: 5, text: "I love that AMBER is cruelty-free and vegan. Great products that align with my values.", product: "Hydra Cream" }, { id: 9, name: "Rachel D.", location: "Denver", rating: 5, text: "The scent is so subtle and natural. No overpowering fragrances, just pure botanical goodness.", product: "Radiance Serum" } ] const TestimonialCard = ({ testimonial }: { testimonial: typeof testimonials[0] }) => (

{/* Stars */} {/* Quote */}

“{testimonial.text}”

{/* Author */}

{testimonial.name}

{testimonial.location}

{testimonial.product}

) export function Testimonials() { const [headerVisible, setHeaderVisible] = useState(false) const headerRef = useRef(null) const column1 = [testimonials[0], testimonials[3], testimonials[6]] const column2 = [testimonials[1], testimonials[4], testimonials[7]] const column3 = [testimonials[2], testimonials[5], testimonials[8]] useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setHeaderVisible(true) } }, { threshold: 0.1 } ) if (headerRef.current) { observer.observe(headerRef.current) } return () => { if (headerRef.current) { observer.unobserve(headerRef.current) } } }, []) return (

{/* Header */}

Kind Words

Loved by thousands

{/* Scrolling Testimonials - Horizontal */}

{/* Gradient Overlays - Left & Right */}

{/* Row 1 - Scrolling Left */}

{[...testimonials, ...testimonials].map((testimonial, index) => (

))}

{/* Row 2 - Scrolling Right */}

{[...testimonials.slice().reverse(), ...testimonials.slice().reverse()].map((testimonial, index) => (

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Header } from "@/components/boty/header" import { Hero } from "@/components/boty/hero" import { TrustBadges } from "@/components/boty/trust-badges" import { FeatureSection } from "@/components/boty/feature-section" import { ProductGrid } from "@/components/boty/product-grid" import { IngredientsSection } from "@/components/boty/ingredients-section" import { ImpactSection } from "@/components/boty/impact-section" import { Testimonials } from "@/components/boty/testimonials" import { CTABanner } from "@/components/boty/cta-banner" import { Newsletter } from "@/components/boty/newsletter" import { Footer } from "@/components/boty/footer" import { getProducts } from "@/lib/shopify" export default async function HomePage() { const products = await getProducts() return (

) } [V0_FILE]typescriptreact:file="components/boty/hero.tsx" isMerged="true" "use client" import Link from "next/link" import { ArrowRight } from "lucide-react" export function Hero() { return (

{/* Background Video */}

) } [V0_FILE]typescript:file="app/actions/cart.ts" isMerged="true" "use server" import { cookies } from "next/headers" import { createCart, getCart, addToCart as addToCartApi, updateCartLine as updateCartLineApi, removeCartLine as removeCartLineApi, type Cart, } from "@/lib/shopify" const CART_COOKIE = "amber_cart_id" async function setCartCookie(cartId: string) { const cookieStore = await cookies() cookieStore.set(CART_COOKIE, cartId, { httpOnly: true, sameSite: "lax", secure: true, maxAge: 60 * 60 * 24 * 30, path: "/", }) } // Resolves a usable cart id. Prefers the id passed from the client (survives // environments where cookies aren't sent back, e.g. iframes), then the cookie, // otherwise creates a new cart. async function resolveCartId(clientCartId?: string): Promise<{ cartId: string; created?: Cart }> { if (clientCartId) { const existing = await getCart(clientCartId) if (existing) return { cartId: clientCartId } } const cookieStore = await cookies() const cookieId = cookieStore.get(CART_COOKIE)?.value if (cookieId) { const existing = await getCart(cookieId) if (existing) return { cartId: cookieId } } const cart = await createCart() await setCartCookie(cart.id) return { cartId: cart.id, created: cart } } export async function getCartAction(cartId?: string): Promise { if (cartId) { const cart = await getCart(cartId) if (cart) return cart } const cookieStore = await cookies() const cookieId = cookieStore.get(CART_COOKIE)?.value if (!cookieId) return null return getCart(cookieId) } export async function addToCartAction(merchandiseId: string, quantity = 1, cartId?: string): Promise { const { cartId: id } = await resolveCartId(cartId) return addToCartApi(id, merchandiseId, quantity) } export async function updateCartLineAction(lineId: string, quantity: number, cartId?: string): Promise { const { cartId: id } = await resolveCartId(cartId) if (quantity <= 0) return removeCartLineApi(id, lineId) return updateCartLineApi(id, lineId, quantity) } export async function removeCartLineAction(lineId: string, cartId?: string): Promise { const { cartId: id } = await resolveCartId(cartId) return removeCartLineApi(id, lineId) } [V0_FILE]typescriptreact:file="components/boty/product-detail.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ChevronLeft, Minus, Plus, ChevronDown, Leaf, Heart, Award, Recycle, Star, Check } from "lucide-react" import { Header } from "@/components/boty/header" import { Footer } from "@/components/boty/footer" import { useCart } from "@/components/boty/cart-context" import type { Product } from "@/lib/shopify" const benefits = [ { icon: Leaf, label: "100% Natural" }, { icon: Heart, label: "Cruelty-Free" }, { icon: Recycle, label: "Eco-Friendly" }, { icon: Award, label: "Expert Approved" }, ] type AccordionSection = "details" | "howToUse" | "ingredients" | "delivery" export function ProductDetail({ product }: { product: Product }) { const { addItem, setIsOpen } = useCart() const [quantity, setQuantity] = useState(1) const [openAccordion, setOpenAccordion] = useState("details") const [isAdded, setIsAdded] = useState(false) const formatPrice = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: product.currencyCode }).format(amount) const toggleAccordion = (section: AccordionSection) => { setOpenAccordion(openAccordion === section ? null : section) } const handleAddToCart = async () => { if (!product.variantId) return await addItem(product.variantId, quantity) setIsAdded(true) setTimeout(() => setIsAdded(false), 2000) } const handleBuyNow = async () => { if (!product.variantId) return await addItem(product.variantId, quantity) setIsOpen(true) } const accordionItems: { key: AccordionSection; title: string; content: string }[] = [ { key: "details", title: "Details", content: product.descriptionHtml.replace(/<[^>]+>/g, "") || product.description }, { key: "howToUse", title: "How to Use", content: "Apply to cleansed skin morning and evening. Gently massage until fully absorbed. For best results, use consistently as part of your daily AMBER ritual.", }, { key: "ingredients", title: "Ingredients", content: "Formulated with naturally derived botanical extracts and clean, sustainable ingredients. Free from parabens, sulfates, and synthetic fragrances.", }, { key: "delivery", title: "Delivery & Returns", content: "Free standard shipping on orders over $50. Express shipping available at checkout. All orders ship within 1-2 business days. Returns accepted within 30 days of purchase if product is unused and sealed.", }, ] return (

{/* Back Link */} Back to Shop

{/* Product Image */}

{/* Product Info */}

{/* Header */}

AMBER Essentials

{product.name}

{/* Rating */}

{[...Array(5)].map((_, i) => ( ))}

(128 reviews)

{product.description}

{/* Price */}

{formatPrice(product.price)} {product.originalPrice && ( {formatPrice(product.originalPrice)} )}

{/* Quantity Selector */}

Quantity

{quantity}

{/* Add to Cart Buttons */}

{/* Benefits */}

{benefits.map((benefit) => (

{benefit.label}

))}

{/* Accordion */}

{accordionItems.map((item) => (

{item.content}

))}

) } [V0_FILE]typescriptreact:file="components/boty/shop-content.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import { ShoppingBag, SlidersHorizontal, X } from "lucide-react" import { Header } from "@/components/boty/header" import { Footer } from "@/components/boty/footer" import { useCart } from "@/components/boty/cart-context" import type { Product } from "@/lib/shopify" export function ShopContent({ products }: { products: Product[] }) { const categories = ["all", ...Array.from(new Set(products.map((p) => p.productType)))] const [selectedCategory, setSelectedCategory] = useState("all") const [showFilters, setShowFilters] = useState(false) const [isVisible, setIsVisible] = useState(false) const gridRef = useRef(null) const filteredProducts = selectedCategory === "all" ? products : products.filter((p) => p.productType === selectedCategory) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (gridRef.current) { observer.observe(gridRef.current) } return () => { if (gridRef.current) { observer.unobserve(gridRef.current) } } }, []) useEffect(() => { setIsVisible(false) const timer = setTimeout(() => setIsVisible(true), 50) return () => clearTimeout(timer) }, [selectedCategory]) return (

{/* Header */}

Our Collection

Shop All Products

Discover our complete range of natural skincare essentials

{/* Filter Bar */}

{/* Desktop Categories */}

{categories.map((category) => ( ))}

{filteredProducts.length} {filteredProducts.length === 1 ? "product" : "products"}

{/* Mobile Filters */} {showFilters && (

Filters

{categories.map((category) => ( ))}

)} {/* Product Grid */}

{filteredProducts.map((product, index) => ( ))}

) } function ProductCard({ product, index, isVisible }: { product: Product; index: number; isVisible: boolean }) { const [imageLoaded, setImageLoaded] = useState(false) const { addItem, isPending } = useCart() const formatPrice = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: product.currencyCode }).format(amount) return (

{/* Image */}

{/* Skeleton */}

setImageLoaded(true)} /> {/* Badge */} {product.badge && ( {product.badge} )} {/* Quick add button */}

{/* Info */}

{product.name}

{product.description}

{formatPrice(product.price)} {product.originalPrice && ( {formatPrice(product.originalPrice)} )}

) } [V0_FILE]typescriptreact:file="app/shop/page.tsx" isMerged="true" import { getProducts } from "@/lib/shopify" import { ShopContent } from "@/components/boty/shop-content" export default async function ShopPage() { const products = await getProducts() return } [V0_FILE]typescriptreact:file="components/boty/cart-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, useCallback, useRef, type ReactNode } from "react" import { getCartAction, addToCartAction, updateCartLineAction, removeCartLineAction, } from "@/app/actions/cart" import type { Cart } from "@/lib/shopify" interface CartContextType { cart: Cart | null addItem: (variantId: string, quantity?: number) => Promise updateQuantity: (lineId: string, quantity: number) => Promise removeItem: (lineId: string) => Promise isOpen: boolean setIsOpen: (open: boolean) => void itemCount: number subtotal: number isPending: boolean } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [cart, setCart] = useState(null) const [isOpen, setIsOpen] = useState(false) const [isPending, setIsPending] = useState(false) const cartIdRef = useRef(undefined) useEffect(() => { getCartAction() .then((c) => { if (c) cartIdRef.current = c.id setCart(c) }) .catch((err) => console.log("[v0] Failed to load cart:", err)) }, []) const addItem = useCallback(async (variantId: string, quantity = 1) => { setIsOpen(true) setIsPending(true) try { const updated = await addToCartAction(variantId, quantity, cartIdRef.current) cartIdRef.current = updated.id setCart(updated) } catch (err) { console.log("[v0] Failed to add item:", err) } finally { setIsPending(false) } }, []) const updateQuantity = useCallback(async (lineId: string, quantity: number) => { setIsPending(true) try { const updated = await updateCartLineAction(lineId, quantity, cartIdRef.current) cartIdRef.current = updated.id setCart(updated) } catch (err) { console.log("[v0] Failed to update quantity:", err) } finally { setIsPending(false) } }, []) const removeItem = useCallback(async (lineId: string) => { setIsPending(true) try { const updated = await removeCartLineAction(lineId, cartIdRef.current) cartIdRef.current = updated.id setCart(updated) } catch (err) { console.log("[v0] Failed to remove item:", err) } finally { setIsPending(false) } }, []) const itemCount = cart?.totalQuantity ?? 0 const subtotal = cart ? Number.parseFloat(cart.cost.subtotalAmount.amount) : 0 return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescript:file="lib/shopify.ts" import "server-only" const API_VERSION = "2025-04" type ShopifyFetchOptions = { query: string variables?: Record cache?: RequestCache tags?: string[] } export async function shopifyFetch({ query, variables, cache = "force-cache", tags }: ShopifyFetchOptions): Promise { // Read env vars at request time, not module-load time, so they're reliably available. const storeDomain = process.env.SHOPIFY_STORE_DOMAIN const accessToken = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN if (!storeDomain || !accessToken) { throw new Error("Missing Shopify environment variables") } const endpoint = `https://${storeDomain}/api/${API_VERSION}/graphql.json` const res = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json", "X-Shopify-Storefront-Access-Token": accessToken, }, body: JSON.stringify({ query, variables }), cache, ...(tags ? { next: { tags } } : {}), }) if (!res.ok) { throw new Error(`Shopify fetch failed: ${res.status} ${res.statusText}`) } const body = await res.json() if (body.errors) { console.log("[v0] Shopify GraphQL errors:", JSON.stringify(body.errors)) throw new Error(body.errors[0]?.message ?? "Shopify GraphQL error") } return body.data as T } // ---- Types ---- export type Product = { id: string // handle, used as the route id shopifyId: string variantId: string name: string description: string descriptionHtml: string price: number originalPrice: number | null currencyCode: string image: string images: string[] badge: string | null category: "cream" | "oil" | "serum" productType: string availableForSale: boolean } type ShopifyImage = { url: string; altText: string | null } type ShopifyProductNode = { id: string handle: string title: string description: string descriptionHtml: string productType: string tags: string[] featuredImage: ShopifyImage | null images: { edges: { node: ShopifyImage }[] } priceRange: { minVariantPrice: { amount: string; currencyCode: string } } compareAtPriceRange: { minVariantPrice: { amount: string } } variants: { edges: { node: { id: string; availableForSale: boolean } }[] } } const PRODUCT_FRAGMENT = ` fragment ProductFields on Product { id handle title description descriptionHtml productType tags featuredImage { url altText } images(first: 6) { edges { node { url altText } } } priceRange { minVariantPrice { amount currencyCode } } compareAtPriceRange { minVariantPrice { amount } } variants(first: 1) { edges { node { id availableForSale } } } } ` function mapCategory(productType: string): Product["category"] { const t = productType.toLowerCase() if (t === "oil") return "oil" if (t === "serum") return "serum" return "cream" } function mapBadge(tags: string[]): string | null { const lower = tags.map((t) => t.toLowerCase()) if (lower.includes("sale")) return "Sale" if (lower.includes("new")) return "New" if (lower.includes("bestseller")) return "Bestseller" return null } function normalizeProduct(node: ShopifyProductNode): Product { const price = Number.parseFloat(node.priceRange.minVariantPrice.amount) const compareAt = Number.parseFloat(node.compareAtPriceRange?.minVariantPrice?.amount ?? "0") const images = node.images.edges.map((e) => e.node.url) return { id: node.handle, shopifyId: node.id, variantId: node.variants.edges[0]?.node.id ?? "", name: node.title, description: node.description, descriptionHtml: node.descriptionHtml, price, originalPrice: compareAt > price ? compareAt : null, currencyCode: node.priceRange.minVariantPrice.currencyCode, image: node.featuredImage?.url ?? images[0] ?? "/placeholder.svg", images: images.length ? images : node.featuredImage ? [node.featuredImage.url] : [], badge: mapBadge(node.tags), category: mapCategory(node.productType), productType: node.productType, availableForSale: node.variants.edges[0]?.node.availableForSale ?? false, } } export async function getProducts(): Promise { const data = await shopifyFetch<{ products: { edges: { node: ShopifyProductNode }[] } }>({ query: ` ${PRODUCT_FRAGMENT} query GetProducts { products(first: 50, sortKey: CREATED_AT) { edges { node { ...ProductFields } } } } `, tags: ["products"], }) return data.products.edges.map((e) => normalizeProduct(e.node)) } export async function getProduct(handle: string): Promise { const data = await shopifyFetch<{ product: ShopifyProductNode | null }>({ query: ` ${PRODUCT_FRAGMENT} query GetProduct($handle: String!) { product(handle: $handle) { ...ProductFields } } `, variables: { handle }, tags: ["products"], }) return data.product ? normalizeProduct(data.product) : null } // ---- Cart ---- export type Cart = { id: string checkoutUrl: string totalQuantity: number cost: { subtotalAmount: { amount: string; currencyCode: string } totalAmount: { amount: string; currencyCode: string } } lines: CartLine[] } export type CartLine = { id: string quantity: number merchandiseId: string productHandle: string title: string image: string price: number currencyCode: string } type ShopifyCart = { id: string checkoutUrl: string totalQuantity: number cost: { subtotalAmount: { amount: string; currencyCode: string } totalAmount: { amount: string; currencyCode: string } } lines: { edges: { node: { id: string quantity: number cost: { totalAmount: { amount: string; currencyCode: string } } merchandise: { id: string price: { amount: string; currencyCode: string } product: { handle: string; title: string; featuredImage: ShopifyImage | null } } } }[] } } const CART_FRAGMENT = ` fragment CartFields on Cart { id checkoutUrl totalQuantity cost { subtotalAmount { amount currencyCode } totalAmount { amount currencyCode } } lines(first: 100) { edges { node { id quantity cost { totalAmount { amount currencyCode } } merchandise { ... on ProductVariant { id price { amount currencyCode } product { handle title featuredImage { url altText } } } } } } } } ` function normalizeCart(cart: ShopifyCart): Cart { return { id: cart.id, checkoutUrl: cart.checkoutUrl, totalQuantity: cart.totalQuantity, cost: cart.cost, lines: cart.lines.edges.map((e) => ({ id: e.node.id, quantity: e.node.quantity, merchandiseId: e.node.merchandise.id, productHandle: e.node.merchandise.product.handle, title: e.node.merchandise.product.title, image: e.node.merchandise.product.featuredImage?.url ?? "/placeholder.svg", price: Number.parseFloat(e.node.merchandise.price.amount), currencyCode: e.node.merchandise.price.currencyCode, })), } } type CartMutationResult = { cart: ShopifyCart | null userErrors?: { field: string[] | null; message: string }[] warnings?: { code: string; message: string }[] } function unwrapCart(result: CartMutationResult, op: string): Cart { if (result.userErrors && result.userErrors.length > 0) { console.log(`[v0] ${op} userErrors:`, JSON.stringify(result.userErrors)) throw new Error(result.userErrors[0].message) } if (result.warnings && result.warnings.length > 0) { console.log(`[v0] ${op} warnings:`, JSON.stringify(result.warnings)) } if (!result.cart) { throw new Error(`${op} returned no cart`) } return normalizeCart(result.cart) } export async function createCart(): Promise { const data = await shopifyFetch<{ cartCreate: CartMutationResult }>({ query: ` ${CART_FRAGMENT} mutation CreateCart { cartCreate { cart { ...CartFields } userErrors { field message } } } `, cache: "no-store", }) return unwrapCart(data.cartCreate, "cartCreate") } export async function getCart(cartId: string): Promise { const data = await shopifyFetch<{ cart: ShopifyCart | null }>({ query: ` ${CART_FRAGMENT} query GetCart($cartId: ID!) { cart(id: $cartId) { ...CartFields } } `, variables: { cartId }, cache: "no-store", }) return data.cart ? normalizeCart(data.cart) : null } export async function addToCart(cartId: string, merchandiseId: string, quantity: number): Promise { const data = await shopifyFetch<{ cartLinesAdd: CartMutationResult }>({ query: ` ${CART_FRAGMENT} mutation AddToCart($cartId: ID!, $lines: [CartLineInput!]!) { cartLinesAdd(cartId: $cartId, lines: $lines) { cart { ...CartFields } userErrors { field message } warnings { code message } } } `, variables: { cartId, lines: [{ merchandiseId, quantity }] }, cache: "no-store", }) return unwrapCart(data.cartLinesAdd, "cartLinesAdd") } export async function updateCartLine(cartId: string, lineId: string, quantity: number): Promise { const data = await shopifyFetch<{ cartLinesUpdate: CartMutationResult }>({ query: ` ${CART_FRAGMENT} mutation UpdateCartLine($cartId: ID!, $lines: [CartLineUpdateInput!]!) { cartLinesUpdate(cartId: $cartId, lines: $lines) { cart { ...CartFields } userErrors { field message } } } `, variables: { cartId, lines: [{ id: lineId, quantity }] }, cache: "no-store", }) return unwrapCart(data.cartLinesUpdate, "cartLinesUpdate") } export async function removeCartLine(cartId: string, lineId: string): Promise { const data = await shopifyFetch<{ cartLinesRemove: CartMutationResult }>({ query: ` ${CART_FRAGMENT} mutation RemoveCartLine($cartId: ID!, $lineIds: [ID!]!) { cartLinesRemove(cartId: $cartId, lineIds: $lineIds) { cart { ...CartFields } userErrors { field message } } } `, variables: { cartId, lineIds: [lineId] }, cache: "no-store", }) return unwrapCart(data.cartLinesRemove, "cartLinesRemove") }85:["$","$L8f",null,{"chatId":"uFMehoQ51rn","children":["$","$L90",null,{"data":{"@\"active-block\",\"uFMehoQ51rn\",":{"id":"b_6tRJG5uGTKt","messageId":"zQkQGZoRDzyu6haYSu7ujYegPXGFQAYB","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Reading env at request time","taskNameComplete":"Read env at request time"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uFMehoQ51rn\",":false,"":null},"children":"$L92"}]}]

Join the ritual

{badge.title}

{item.title}

Gentle essentials

{product.name}

Beauty with purpose.

{stat.label}

Nature's finest,
for your skin.

Express Your True Colors

Care that breathes.

Emma Laurent

Sofia Chen

{feature.title}

100% Natural

100% You

Loved by thousands

Skincare that breathes with you.

{product.name}

Shop All Products

Filters

{product.name}

Join the ritual

{badge.title}

{item.title}

Gentle essentials

{product.name}

Beauty with purpose.

{stat.label}

Nature's finest, for your skin.

Express Your True Colors

Care that breathes.

Emma Laurent

Sofia Chen

{feature.title}

100% Natural

100% You

Loved by thousands

Skincare that breathes with you.

{product.name}

Nature's finest,
for your skin.

About

Tags

Share

About

Tags

Share

More from kerroudj

More Templates Like This